@import './variables.scss';

// 页面容器基础样式
.page-container {
  padding: $spacing-extra-large $spacing-large;
  max-width: $container-width;
  margin: 0 auto;
  min-height: calc(100vh - 64px); // 减去头部导航的高度
}

// 页面标题基础样式
.page-title {
  font-size: $font-size-extra-large;
  color: $text-primary;
  margin-bottom: $spacing-extra-large;
  text-align: center;
  font-weight: 600;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: $primary-color;
    border-radius: $border-radius-base;
  }
}

// 页面描述基础样式
.page-desc {
  font-size: $font-size-medium;
  color: $text-regular;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto $spacing-extra-large;
}

// 卡片基础样式
.base-card {
  background: $background-color-lighter;
  border-radius: $border-radius-large;
  box-shadow: $box-shadow-base;
  transition: $transition-base;
  
  &:hover {
    box-shadow: $box-shadow-dark;
    transform: translateY(-5px);
  }
}

// 表单基础样式
.base-form {
  max-width: 800px;
  margin: 0 auto;
  padding: $spacing-extra-large;
  background: $background-color-lighter;
  border-radius: $border-radius-large;
  box-shadow: $box-shadow-base;
}

// 响应式网格系统
.grid-container {
  display: grid;
  gap: $spacing-large;
  
  @media (max-width: $breakpoint-xs) {
    grid-template-columns: 1fr;
  }
  
  @media (min-width: $breakpoint-sm) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: $breakpoint-md) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @media (min-width: $breakpoint-lg) {
    grid-template-columns: repeat(4, 1fr);
  }
}

// 动画过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 按钮基础样式
.base-button {
  padding: $spacing-base $spacing-large;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  transition: $transition-base;
  cursor: pointer;
  
  &:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}

// 图片基础样式
.base-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: $border-radius-base;
} 